<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/fastclick.js"></script>
</head>

<body style="background:#fff">
    <div v-cloak id="register_two" class="register_two">
        <!-- <section class="register_one register_pub" v-show="state == 0">
            <div class="register_one_title">
                <h1>欢迎您！</h1>
                <p>欢迎使用<span id="appname"></span></p>
            </div>
            <div class="register_one_input">
                <span class="phone_left">+86</span>
                <input class="" type="number" maxlength="11" v-model="input" id="phone" @click="inputClick('phone')" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)">
                <span class="phone_right" @click="clearPhone"></span>
            </div>
            <div class="register_one_next">
                <button class="nextStep" @click="nextStep">下一步</button>
            </div>
        </section> -->

        <section>
          <div class="logo-box">
            <img src="../../image/logo3.png">
          </div>
          <div class="input-box">
              <div class="input-pub phone">
                  <input type="number" v-model="input" id="phone" placeholder="请输入手机号码" @click="inputClick('phone')">
              </div>
              <div class="input-pub code">
                  <input type="text" v-model="code" id="code" placeholder="请输入验证码" @click="inputClick('code')">
                  <span class="code-btn" @click="getCode">{{codeText}}</span>
              </div>
              <div class="submit" @click="login">登录</div>
          </div>
        </section>

        <!-- <section class="register_one register_pub" v-show="state !== 0">
            <div class="register_one_title">
                <h1>注册</h1>
                <p>请输入{{input}}收到的验证码</p>
            </div>
            <div class="register_two_input">
                <input class="" type="number" maxlength="11" v-model="code" id="code" @click="inputClick('code')" placeholder="验证码">
            </div>
            <div class="register_one_next">
                <span class="getCode" @click="getCode" v-show="codeState">获取验证码</span>
                <span class="times" v-show="!codeState">时间剩余{{time}}s</span>
                <button class="nextStep" @click="login">登录</button>
            </div>
        </section> -->
    </div>
</body>
<script src="../../script/aui-dialog.js"></script>
<script src="../../script/aui-toast.js"></script>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.min.js"></script>
<script type="text/javascript">
    apiready = function() {
      FastClick.attach(document.body);
      var appName = api.appName;
      // var appname = $api.byId('appname');
      // appname.innerHTML = appName;
      var dialog = new auiDialog();
      var toast = new auiToast();
      var vm = new Vue({
          el: '#register_two',
          data: {
              state: 0,
              input: '',
              code: '',
              codeState: true,
              time: 120,
              codeText: '发送验证码'
          },
          methods: {
              nextStep: function() {
                  if (this.input.length == 11) {
                      this.state = 1
                  } else {
                      $api.confirm('手机号码不正确')
                      dialog.alert({
                        title: "提示",
                        msg: '手机号码不正确',
                        buttons: ['确定']
                     })
                  }
              },
              inputClick(id) {
                  $api.byId(id).focus()
              },
              clearPhone: function() {
                this.input = ''
              },
              getCode: function() {
                  var that = this;
                  if (that.input === '') {
                    // alert('请填写手机号码')
                    dialog.alert({
                      title: "提示",
                      msg: '请填写手机号码',
                      buttons: ['确定']
                    })
                    return false
                  } else if (this.input.length !== 11) {
                    // alert('手机号码不正确')
                    dialog.alert({
                      title: "提示",
                      msg: '手机号码不正确',
                      buttons: ['确定']
                    })
                    return false
                  }
                  that.codeText = 120;
                  let timer = setInterval(() => {
                      that.codeText--;
                      if (that.codeText === 0) {
                          clearInterval(timer);
                          that.codeText = '发送验证码'
                      }
                  }, 1000);
                  $.ajax({
                  		type: "get",
                      url: "http://api.oouye.com/account/app_code",
                  		dataType: 'json',
                  		async: false,
                  		data:{
                        did: $api.getStorage('did'),
                        channel: $api.getStorage('channel'),
                        domain: 'xiaozhusudai',
                        phone: that.input,
                        develop: false
                      },
                  		success: function(data){
                        // alert(data.code)
                        // alert(JSON.stringify(data))
                  		},
                      fail: function(data){
                      }
                  });
              },
              login: function() {
                var that = this
                if (that.input === '') {
                  dialog.alert({
                    title: "提示",
                    msg: '请填写手机号码',
                    buttons: ['确定']
                  })
                  return false
                } else if (this.input.length !== 11) {
                  dialog.alert({
                    title: "提示",
                    msg: '手机号码不正确',
                    buttons: ['确定']
                  })
                  return false
                } else if (that.code === '') {
                    dialog.alert({
                      title: "提示",
                      msg: '请输入验证码',
                      buttons: ['确定']
                    })
                    return false
                }
                $.ajax({
                    type: "get",
                    url: "http://api.oouye.com/account/login",
                    dataType: 'json',
                    async:false,
                    data:{
                      did: $api.getStorage('did'),
                      boundleId: 'com.lin.xiaozhusudai',
                      channel: $api.getStorage('channel'),
                      phone: that.input,
                      code: that.code,
                      // check: 0,
                      // version: '1.0'
                    },
                    success: function(data){
                      $api.setStorage('phone', that.input)
                      $api.isDownload(api.pageParam.item, api.pageParam.key)
                      // api.alert({
                      //     title: "提示",
                      //     msg: '登录成功',
                      //     buttons: ['确定']
                      // }, function(ret, err) {
                      // });
                    }
                });
              }
          },
          created: function() {},
          mounted: function() {}
      })
    };

</script>
<style>
body,
html {
    /*background: url(../../image/logintop.png) no-repeat top center;*/
    background-size: #fff;

}

.login-box {
    width: 100%;
    background: #f00;
    margin-top: -20px;
}


.logo-box {
    width: 100%;
    margin-top: 25px;
    text-align: center;
}

.logo-box img {
    text-align: center;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 74px;
}

.input-box {
    margin-top: 33px;
    padding: 0 32px;
}

.input-pub {
    position: relative;
    border-bottom: #dbdbdb solid 1px;
    padding: 17px 0;
    margin-bottom: 14px;
}

.input-pub input {
    position: relative;
    width: 100%;
    height: 28px;
    padding-left: 32px;
    font-size: 14px;
    line-height: 28px;
    box-sizing: border-box;
}

.phone {
    background: url() no-repeat left 0.186667rem center;
    background-size: 12px 16px;
}

.code {
    background: url() no-repeat left 0.186667rem center;
    background-size: 12px 14px;
}

.code-btn {
    position: absolute;
    top: 14px;
    right: 0;
    z-index: 55;
    display: block;
    width: 86px;
    height: 32px;
    background: #0a78ff;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 32px;
    border-radius: 16px;
}

.submit {
    width: 100%;
    height: 42px;
    margin-top: 32px;
    background: #4b6ff9;
    background: -webkit-linear-gradient(to right, #449efb, #0c7aff);
    background: -o-linear-gradient(to right, #449efb, #0c7aff);
    background: -moz-linear-gradient(to right, #449efb, #0c7aff);
    background: linear-gradient(to right, #449efb, #0c7aff);
    text-align: center;
    line-height: 42px;
    font-size: 16px;
    color: #fff;
    border-radius: 21px;
    /*box-shadow: 0 5px 12px 5px rgba(244, 158, 35, 0.1)*/
}
</style>
</html>
